
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        body {
            background: #000;
        }

        .wrap {
            margin: 100px auto 0;
            width: 630px;
			      height: 394px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }

        .wrap li {
            float: left;
            margin: 0 10px 10px 0;
        }

        .wrap img {
            display: block;
			      border: 0;
        }
    </style>
    
</head>
<body>
<div class="wrap">
    <ul>
        <li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/06.jpg" alt=""/></a></li>
    </ul>
</div>
</body>
<script src="./js/jquery-2.2.2.js"></script>
<script>
  /*
    鼠标移入某个li，把当前变亮，其他变暗，鼠标移出，恢复原状

    思路：
      给每个li注册鼠标移入和鼠标移出事件，排他的设置li的透明度
    步骤：
      1.获取元素
      2.注册事件
      3.移入的时候
        3.1 把所有的都变成透明的
        3.2 把当前变不透明
      4.移出的时候，所有都恢复
  */
  $(function(){
    // 获取元素
    var lis = $('.wrap li');
    // 注册鼠标的移入事件
    // lis.on('mouseover',function(){
    //   // 排他的设置li的透明度
    //   lis.css('opacity',0.4);
    //   $(this).css('opacity',1);
    // });

    // lis.on('mouseout',function(){
    //  lis.css('opacity',1); // css方法内部已经帮我们实现了遍历，就不需要我们自己写遍历
    // });
  });


  /*
    但是在案例厘米，其实当前的li是不用变成透明之后再设置回不透明的
    思路：
      把除了我之外的变成0.4即可，我还是1

      得获取到除了我之外的兄弟元素
        jq里面获取某个元素的兄弟元素
          jq对象.siblings();
  */
  // $(function(){
  //   var lis = $(".wrap li");
  //   lis.on('mouseover',function(){
  //     // console.log(this);
  //     // console.log($(this).siblings());
  //     $(this).css('opacity',1);
  //     $(this).siblings().css('opacity',0.4);
  //   });
  // })


  /*
    jq中推荐一种编程方式： 链式编程
      什么是链式编程
        可以不停地 对象.方法().方法.方法()
  */
  $(function(){
    var lis = $(".wrap li");
    lis.on('mouseover',function(){
      $(this).css('opacity',1).siblings().css('opacity',0.4);
      /* 链式编程的原理
          方法的返回值就是调用这个方法的对象
       */
      // var result = $(this).css('opacity',1);
      // console.log(result);
      // var laodi = result.siblings();
      // console.log(laodi);
    }).on('mouseout',function(){
     lis.css('opacity',1); // css方法内部已经帮我们实现了遍历，就不需要我们自己写遍历
    });
  })
</script>
</html>
